<template>
	<u-popup v-model="isPay" mode="bottom" border-radius="20" @close="cancel">
		<view class="page">
			<view class="avatar-box">
				<u-avatar size="large" :src="vuex_user.avatar"></u-avatar>
			</view>
			<view class="tip-info">每次认证需要支付1元认证费。</view>
			<view class="btn-box">
				<u-button @click="pay" shape="circle" type="success">支付认证</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		props: {
			desc: String,
			title: String,
		},
		data() {
			return {
				login: {
					appId: '',
					encryptedData: '',
					code: '',
					iv: ''
				},
				isPay: false,
			}
		},
		created() {
			this.init();
	    },
		computed: {
			...mapState(['vuex_user']),
		},
		methods: {
			init() {
				uni.$on('cardPay', this.handleEvents)
			},
			handleEvents(e) {
				this.isPay = e;
			},
			pay() {
				var coinNum = 2 * 100;
				this.$u.post('/pay/coin/payNum',{
					coinNum: coinNum,
					appId: this.website.appId,
				}).then(res => {
					var that = this;
					uni.requestPayment({ 
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageValue,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function(res) {
							/* uni.showToast({
								title: '支付成功',
								icon:'success',
								duration: 2000
							}); */
							that.$u.toast('支付成功');
							that.isPay = false;
							that.$emit('ok');
						},
						fail: function(err) {
							uni.showModal({
								title: '温馨提示',
								content: '订单尚未支付',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										
									}
								}
							});
						}
					});
				});
			},
			cancel() {
				this.isPay = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tip-info {
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		color: #303133;
		margin-bottom: 15px;
	}
	.page {
		padding: 30px 15px;
		padding-bottom: 100px;
	}
	.avatar-box {
		display: flex;
		justify-content: center;
		padding: 15px;
		padding-top: 0;
	}
</style>
